<template>
  <!-- 阅读广度 -->
  <div class="readspan">
    <!-- 提示文字 -->
    <pretestCon
      pretestInfo="下面是阅读广度测试, 请认真阅读屏幕中的句子并记住加点字哦, 1分钟后自动消除进入答题!"
    
    />
    <!-- 题干 -->
    <div class="pretest_con_stem scroll_style" v-if="true">
      <div class="topic_item" v-for="item in 10" :key="item">
        <div class="topic_item_t">1/1</div>
        <div class="topic_item_p">
          少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了。少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了。
        </div>
        <!-- <div v-else class="topic_item_p" v-html="v.content"></div> -->
      </div>
    </div>
    <!-- 问题选项 -->
    <div class="pretest_con_problem scroll_style" v-else>
      <div v-for="(item, index) in readSpanStemlist" :key="index">
        <div class="topic_item" v-for="(v, i) in item.question" :key="i">
          <div class="topic_item_t">
            <div class="item_t_num">1/20</div>
            <p style="color: #373737; width: 7.4rem">{{ v.question }}</p>
          </div>
          <div class="topic_item_p">
            <!-- <div class="no_item_p_sel" v-if="!v.answer.length">空</div> -->
            <div
              v-for="l in v.answer"
              :key="l.id"
              class="item_p_sel"
              @click="changeItemel(l, i)"
            >
              <img
                v-if="$store.state.answer[i] == l.id"
                class="target"
                src="../../assets/image/lesson/target.png"
                alt=""
              />
              {{ l.answer_content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pretestCon from "@/components/pretestCon";
export default {
  name: "ReadingBreadth",
  components: {
    pretestCon,
  },
};
</script>

<style lang="less" scoped>
.readspan {
  padding: 0.46rem 0.67rem 0.3rem 0.81rem;
  width: 100%;
  height: 100%;
  color: #373737;
  font-size: 0.21rem;
  box-sizing: border-box;
  // 题干
  .pretest_con_stem {
    .topic_item {
      .topic_item_t {
        margin-top: 0.5rem;
        width: 0.7rem;
        height: 0.3rem;
        line-height: 0.3rem;
        color: #2175f4;
        text-align: center;
        background: #dce6ff;
        border-radius: 6px 18px 18px 18px;
      }

      .topic_item_p {
        padding-left: 0.6rem;
        font-size: 0.21rem;
        line-height: 0.64rem;
        color: #373737;
      }
    }
  }
  // 问题选项
  .pretest_con_problem {
    .topic_item {
      font-size: 0.21rem;
      .topic_item_t {
        display: flex;
        align-items: center;
        .item_t_num {
          margin-right: 0.63rem;
          padding: 0 0.11rem;
          height: 0.3rem;
          font-size: 0.18rem;
          color: #fff;
          background: linear-gradient(117deg, #ff6c4f 0%, #ff3333 100%);
          border-radius: 0px 10px 10px 10px;
        }
        & > img {
          margin: 0 0.2rem;
          width: 0.75rem;
          height: 0.75rem;
        }
      }

      .topic_item_p {
        display: flex;
        flex-wrap: wrap;
        margin: 0.3rem 0;
        padding-left: 0.59rem;
        .item_p_sel {
          position: relative;
          margin: 0.13rem 0.4rem;
          // padding: 0 .3rem 0 .6rem;
          padding: 0 0.86rem 0 0.98rem;
          height: 0.85rem;
          line-height: 0.85rem;
          text-align: center;
          color: #333;
          font-size: 0.18rem;
          border: 1px solid #c8c7c4;
          border-radius: 45px;
          cursor: pointer;
          .target {
            position: absolute;
            top: 50%;
            left: 0.31rem;
            transform: translateY(-60%);
            width: 0.35rem;
            height: 0.38rem;
          }
        }
        .curr_item_p_sel {
          background: #e8edf3;
        }
      }
    }
  }
}
</style>